import React from 'react';

interface TgNavTopProps {
  title: string;
  isActive?: boolean;
  userInfo?: {
    username: string;
    name: string;
    loginTime: string;
    role?: {
      name: string;
      code: string;
      label: string;
    };
  } | null;
  onLogout?: () => void;
}

const TgNavTop: React.FC<TgNavTopProps> = ({ title, isActive = false, userInfo, onLogout }) => {
  return (
    <div className="tgnavtop flex h-12 items-center justify-between border-b border-gray-200 bg-gray-100 px-4">
      <h1
        className={`text-lg font-medium ${
          isActive ? 'border-blue-600 text-blue-600 border-b-2 pb-1' : 'text-gray-700'
        }`}
      >
        {title}
      </h1>

      {/* 用户信息和退出按钮 */}
      <div className="flex items-center space-x-4">
        {userInfo && (
          <div className="flex items-center space-x-2">
            <div className="text-sm text-gray-600">
              欢迎，{userInfo.name} ({userInfo.username})
              {userInfo.role && (
                <span className="bg-blue-100 text-blue-800 ml-2 rounded px-2 py-1 text-xs">
                  {userInfo.role.label}
                </span>
              )}
            </div>
            <button
              onClick={onLogout}
              className="rounded px-2 py-1 text-sm text-gray-500 hover:bg-gray-200 hover:text-gray-700"
            >
              退出
            </button>
          </div>
        )}
      </div>
    </div>
  );
};

export default TgNavTop;
